<template>
  <!-- 主体 -->
  <div class="home">
    <!-- 版心 -->
    <div class="home-center">
      <!-- 模块1：顶部导航栏nav-menu -->
      <div class="nav-menu-center">
        <NavMenu></NavMenu>
      </div>

      <!-- 模块2：轮播图banner1 +购票栏 ticket-menu -->
      <!-- 模块2：轮播图banner1 -->
      <div class="banner1">
        <div class="banner1-center">
          <el-carousel class="banner1-carousel" indicator-position="inside">
            <el-carousel-item
              class="banner1-carousel-item"
              v-for="src in imgList"
              v-bind:key="src"
            >
              <img v-bind:src="src" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 模块2：购票栏 ticket-menu -->
        <TicketMenu class="ticket-menu"></TicketMenu>
      </div>

      <!-- 模块3：标题图1 title1 + 日程模块schedule-module + 标题图2 title2 + 轮播图banner2 -->
      <!-- 模块3：标题图1 title1  -->
      <div class="module3">
        <div class="module3-center">
          <!-- 背景图 -->
          <div class="module3-background1"></div>
          <div class="module3-background2"></div>
          <div class="module3-background3"></div>
          <div class="module3-background4"></div>

          <!-- 标题图1 title1 -->
          <div class="title1"></div>

          <!-- 日程模块schedule-module -->
          <div class="schedule-module">
            <dir class="schedule-module-center">
              <!-- 日程模块schedule-module1 -->
              <img
                src="https://www.hzsp.com/images/itab1.jpg"
                class="schedule-module1 flex-module1"
              />

              <!-- 日程模块schedule-module2 -->
              <div class="schedule-module2 flex-module1">
                <div>
                  <div id="schedule-module2-nav">
                    <span
                      :class="{ active: now == i }"
                      @click="now = i"
                      v-for="(nav, i) in navs"
                      :key="i"
                      >{{ nav }}</span
                    >
                  </div>
                  <div class="schedule-module2-content">
                    <ul
                      class="schedule-module2-content-ul"
                      v-for="schedule in schedules[now].sch" :key="schedule.sid"
                    >
                      <li>{{ schedule.content }}</li>
                    </ul>
                  </div>
                  <p class="schedule-module2-footer">查看更多</p>
                </div>
              </div>

              <!-- 日程模块schedule-module3 -->
              <div class="schedule-module3 flex-module1">
                <ul class="schedule-module3-ul">
                  <li class="schedule-module3-li">
                    <div class="schedule-module3-div"></div>
                    <h4 class="schedule-module3-h4 chengrenpiao">成人票</h4>
                    <strong class="schedule-module3-strong">￥210</strong>
                    <i class="schedule-module3-i"></i>
                  </li>
                  <li class="schedule-module3-li">
                    <div class="schedule-module3-div"></div>
                    <h4 class="schedule-module3-h4">儿童长者票</h4>
                    <strong class="schedule-module3-strong">￥140</strong>
                    <i class="schedule-module3-i"></i>
                  </li>
                  <li class="schedule-module3-li">
                    <div class="schedule-module3-div"></div>
                    <h4 class="schedule-module3-h4">大学生门票</h4>
                    <strong class="schedule-module3-strong">￥170</strong>
                    <i class="schedule-module3-i"></i>
                  </li>
                </ul>
                <router-link to="/index" style="text-decoration: none">
                  <div class="schedule-module3-tobuy" target="_blank">
                    在线购票
                  </div>
                </router-link>
              </div>
            </dir>
          </div>

          <!-- 标题图2 title2 -->
          <div class="title2"></div>

          <!-- 轮播图banner2 -->
          <div class="banner2">
            <div class="banner2-center">
              <el-carousel class="banner2-carousel" indicator-position="inside">
                <el-carousel-item
                  class="banner2-carousel-item"
                  v-for="banner2Image in banner2Images"
                  v-bind:key="banner2Image"
                >
                  <img v-bind:src="banner2Image" />
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>

      <!-- 模块4：标题图3 title3 + 九宫格模块nine-module -->
      <div class="module4">
        <!-- 背景图 -->
        <div class="module4-background"></div>

        <!-- 标题图3 title3 -->
        <div class="title3"></div>

        <!-- 九宫格模块nine-module -->
        <div class="module4-nine-module">
          <!-- 九宫格模块左边 -->
          <div class="module4-nine-module-l">
            <!-- 九宫格模块左边一楼 -->
            <div class="module4-nine-module-l-1">
              <!-- 九宫格模块左边一楼第一块 -->
              <div class="module4-nine-module-l-da module4-image1"></div>
              <!-- 九宫格模块左边一楼第二块 -->
              <div class="module4-nine-module-l-xiao module4-image2"></div>
            </div>
            <!-- 九宫格模块左边二楼 -->
            <div class="module4-nine-module-l-2">
              <!-- 九宫格模块左边二楼第一块 -->
              <div class="module4-nine-module-l-xiao module4-image3"></div>
              <!-- 九宫格模块左边二楼第二块 -->
              <div class="module4-nine-module-l-xiao module4-image4"></div>
              <!-- 九宫格模块左边二楼第三块 -->
              <div class="module4-nine-module-l-xiao module4-image5"></div>
            </div>
          </div>

          <!-- 九宫格模块右边 -->
          <div class="module4-nine-module-r">
            <video
              class="module4-nine-module-video"
              preload="auto"
              media-player="audioPlayer"
              loop
              autoplay
              controls
            >
              <source src="../../public/1.mp4" />
            </video>
            <!-- 按钮 -->
            <div class="module4-button">换一个</div>
          </div>
        </div>
      </div>

      <!-- 模块5：标题图4 title4 + 轮播图banner3 -->
      <div class="module5">
        <div class="module5-center">
          <!-- 标题图1 title4 -->
          <div class="title4"></div>

          <!-- 轮播图banner3 -->
          <div class="banner3">
            <el-carousel class="banner3-carousel" indicator-position="inside">
              <el-carousel-item
                class="banner3-carousel-item"
                v-for="banner3Image in banner3Images"
                v-bind:key="banner3Image"
              >
                <img v-bind:src="banner3Image" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
      </div>

      <!-- 模块6：五个导航图 module6-navbar + 标题图1 title5 + 轮播图banner4 +标题图6 title6 +  -->
      <div class="module6">
        <div class="module6-center">
          <!-- 背景图3张 -->
          <div class="module6-background1"></div>
          <div class="module6-background2"></div>
          <div class="module6-background3"></div>

          <!-- 五个导航图 module6-navbar -->
          <div class="module6-navbar">
            <!-- 导航图1 -->
            <div class="module6-image1">
              <div class="image1"></div>
              <h4>精彩表演</h4>
            </div>

            <!-- 导航图2 -->
            <div class="module6-image2">
              <div class="image2"></div>
              <h4>游园提示</h4>
            </div>

            <!-- 导航图3 -->
            <div class="module6-image3">
              <div class="image3"></div>
              <h4>计划行程</h4>
            </div>

            <!-- 导航图4 -->
            <div class="module6-image4">
              <div class="image4"></div>
              <h4>园区地图</h4>
            </div>

            <!-- 导航图5 -->
            <div class="module6-image5">
              <div class="image5"></div>
              <h4>交通指南</h4>
            </div>
          </div>

          <!-- 标题图5 title5 -->
          <div class="title5"></div>

          <!-- 轮播图banner4 -->
          <div class="banner4">
            <el-carousel class="banner4-carousel" indicator-position="inside">
              <el-carousel-item
                class="banner4-carousel-item"
                v-for="banner4Image in banner4Images"
                v-bind:key="banner4Image"
              >
                <img v-bind:src="banner4Image" />
              </el-carousel-item>
            </el-carousel>
          </div>

          <!-- 标题图6 title6 -->
          <div class="title6"></div>

          <!-- 问题框 module6-asks -->
          <div class="module6-asks">
            <ul class="module6-asks-ul">
              <li class="module6-asks-li">
                <a href="">
                  <i>问</i>
                  <p>杭州野生动物世界票价是多少？</p>
                </a>
              </li>
              <li>
                <a href="">
                  <i>问</i>
                  <p>杭州野生动物世界具体位置、交通状况</p>
                </a>
              </li>
              <li>
                <a href="">
                  <i>问</i>
                  <p>园区内有哪些游玩亮点？</p>
                </a>
              </li>
              <li>
                <a href="">
                  <i>问</i>
                  <p>园区可以办理年卡么？</p>
                </a>
              </li>
              <li>
                <a href="">
                  <i>问</i>
                  <p>园区大门口有停车场的吗？</p>
                </a>
              </li>
            </ul>
            <!-- 按钮 -->
            <div class="module6-asks-button">了解更多</div>
          </div>
        </div>
      </div>

      <!-- 模块7：底部组件bot -->
      <bot></bot>
    </div>
  </div>
</template>

<script>
import NavMenu from "../components/NavMenu.vue";
import TicketMenu from "../components/TicketMenu.vue";
import ElementUI from "element-ui";
import Bot from "../components/index/Bot.vue";
export default {
  data() {
    return {
      navs: ["园长推荐", "神奇动物学院"],
      now: 0,
      schedules: [
        {
          sid: 0,
          sch: [
            { content: " " },
            { content: " " },
            { content: "欢乐迎宾（主大门广场）" },
            { content: "开园迎宾秀（非工作日）" },
            { content: "非洲风情（戏水广场）" },
            { content: "11:00（非工作日）" },
            { content: " 11:00 14:30（工作日，每周一暂停）" },
            { content: "沸腾的森林（森林剧场）" },
            { content: "13:00 15:00 （非工作日）" },
            { content: "13:00 （工作日）" },
            { content: "动物学院（欢乐剧场）" },
            { content: "14:00（每周一暂停）" },
            { content: "具体以出游当天园区现场广播为准。" },
            { content: " " },
            { content: " " },
          ],
        },
        {
          sid: 1,
          sch: [
            { content: " " },
            { content: " " },
            { content: "大熊猫课堂（中华国宝区熊猫殿）" },
            { content: "10:30 14:30 15:00" },
            { content: "稀世中国虎课堂（欢乐剧场）" },
            { content: "13:45（每周一暂停）" },
            { content: " 动物救助课堂（森林剧场）" },
            { content: "12:45" },
            { content: "千奇百蛋课堂（森巴精灵部落）" },
            { content: "10:40 14:00" },
            { content: "小浣熊课堂（浣熊展区）" },
            { content: "10:20 " },
            { content: "非洲动物课堂（非洲部落）" },
            { content: "15:00" },
            { content: "小火车课堂（乘车游览区）" },
            {
              content: "10:15 11:00 11:45 12:30 13:15 14:00 14:45 15:40 16:10 ",
            },
            { content: "白虎课堂（掠食险境）" },
            { content: "10:00 11:00 12:00 14:00 15:30 （非工作日）" },
            { content: "10:30 14:30 15:30 （工作日）" },
            { content: "萌宠课堂（萌宠乐园）" },
            { content: "12:00   14:30" },
            { content: "具体以出游当天园区现场广播为准。" },
            { content: " " },
            { content: " " },
          ],
        },
      ],
      imgList: [
        "https://adm.hzsp.com/uploads/20220906/12ae78a11bb985ba1936ba016b26d40b.jpg",
        "https://adm.hzsp.com/uploads/20220905/9a20c788077aa2b8c016ba93ec40ca02.jpg",
        "https://adm.hzsp.com/uploads/20220901/b6e10bfdc1fe3adcc62f98548e4a9639.jpg",
        "https://adm.hzsp.com/uploads/20220321/f404c5a4c67bff48c93a4e1c6163649c.jpg",
        "https://adm.hzsp.com/uploads/20211229/3bd15a547ffb84ba046c8431fb058303.jpg",
      ],
      banner2Images: [
        "\/banner2\/nav2-1.png",
        "\/banner2\/nav2-2.png",
        "\/banner2\/nav2-3.png",
      ],
      banner3Images: [
        "\/banner3\/nav3-1.png",
        "\/banner3\/nav3-2.png",
        "\/banner3\/nav3-3.png",
      ],
      banner4Images: [
        "\/banner4\/nav4-1.png",
        "\/banner4\/nav4-2.png",
        "\/banner4\/nav4-3.png",
      ],
    };
  },
  components: {
    NavMenu,
    TicketMenu,
    Bot,
  },
};
</script>

<style lang="scss" scoped>
// 样式重置
* {
  margin: 0;
  border: 0;
  box-sizing: border-box;
  display: block;
  outline: none;
  font-size: 10px;
  line-height: 1.15;
  font-family: "Microsoft YaHei", 微软雅黑, "MicrosoftJhengHei", 华文细黑,
    STHeiti, MingLiu;
}
.home {
  overflow-x: hidden;
}

// 主页的版心
.home-center {
  width: 1900px;
  margin: 0 auto;
  border: 0;
}

/////////模块1：顶部导航栏nav-menu/////////////////////////////////////////////////

.nav-menu-center {
  width: 100%;
  height: 100%;
}

/////////模块2：轮播图banner1 +购票栏 ticket-menu//////////////////
// 轮播图样式
.banner1 {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner1-carousel {
  width: 1900px;
  height: 673px;
}

.banner1-carousel-item {
  width: 1900px;
  height: 673px;
}

.banner1-carousel-item img {
  width: 1900px;
  height: 673px;
}

// 购票栏
.ticket-menu {
  position: absolute;
  margin: auto;
  left: 50%;
  bottom: -100px;
  transform: translateX(-50%);
  z-index: 50;
}

//////////////模块3：标题图1 title1 + 点击跳转模块module1 + 标题图2 title2 + 轮播图banner2 -->
.module3 {
  position: relative;
  width: 1900px;
  height: 1400px;
  background-image: url("https://www.hzsp.com/images/repeat/wen1.jpg");
}

// 四个背景图
.module3-background1 {
  position: absolute;
  width: 1576px;
  height: 374px;
  background-image: url("https://www.hzsp.com/images/repeat/jiao2.png");
  z-index: 5;
}

.module3-background2 {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 557px;
  height: 719px;
  background-image: url("https://www.hzsp.com/images/repeat/jiao1.png");
  z-index: 5;
}

.module3-background3 {
  position: absolute;
  right: 0;
  top: 250px;
  width: 436px;
  height: 505px;
  background-image: url("https://www.hzsp.com/images/dongwu2.png");
  z-index: 5;
}

.module3-background4 {
  position: absolute;
  left: 0;
  bottom: 200px;
  width: 217px;
  height: 371px;
  background-image: url("https://www.hzsp.com/images/dongwu1.png");
  z-index: 5;
}

// 标题图1 title1
.title1 {
  position: absolute;
  top: 140px;
  left: 50%;
  margin-left: -471px;
  width: 942px;
  height: 72px;
  background-image: url("https://www.hzsp.com/images/title1s.png");
  z-index: 10;
}

// 日程模块schedule-module
.schedule-module {
  position: absolute;
  top: 250px;
  left: 50%;
  margin-left: -750px;
  width: 1500px;
  height: 510px;
  z-index: 10;
}

.flex-module1 {
  display: inline-block;
  width: 500px;
  height: 510px;
}

.schedule-module1 {
  width: 485px;
  height: 510px;
  margin-left: 15px;
  background-size: 100% auto;
  border-radius: 15px 0 0 15px;
}

.schedule-module2 {
  position: absolute;
  width: 485px;
  height: 510px;
  margin-right: 15px;
  background-color: #fff;
  border-radius: 0 15px 15px 0;
}

#schedule-module2-nav {
  background-color: #fff;
  display: flex;
  border-radius: 0 15px 0 0;
  cursor: pointer;

  span {
    width: 244px;
    text-align: center;
    padding: 22px 25px;
    color: #6d6d6d;
    font-size: 24px;
    font-weight: bold;
    border-bottom: 1px solid rgba(0, 0, 0, 0.301);

    &.active {
      color: #be7e32;
      border-bottom: 5px solid #be7e32;
    }
  }
}

.schedule-module2-content {
  position: relative;
  width: 485px;
  height: 350px;
  overflow-y: scroll;
}

.schedule-module2-content-ul li {
  text-align: center;
  font-size: 14px;
  color: #333333;
  padding: 5px;
  margin-bottom: 10px;
}

.schedule-module2-footer {
  width: 485px;
  height: 75px;
  position: absolute;
  font-weight: bold;
  font-size: 20px;
  line-height: 75px;
  color: #55504d;
  text-align: center;
  cursor: pointer;
}

.schedule-module3 {
  position: absolute;
  right: 0;
  width: 500px;
  height: 510px;
  background-image: url("https://www.hzsp.com/images/repeat/driveBG.jpg");
  background-size: 100% 100%;
  border-radius: 15px;
}

.schedule-module3-ul {
  position: relative;
  box-sizing: content-box;
  top: 0;
  left: 15px;
  width: 430px;
  height: 369px;
  padding: 20px;
}

.schedule-module3-li {
  position: relative;
  margin-top: 10px;
  width: 430px;
  height: 113px;
  border-radius: 15px;
  background-color: #fff;
}

.schedule-module3-div {
  position: absolute;
  top: 6px;
  left: 7px;
  width: 100px;
  height: 100px;
  border-radius: 15px;
  background-image: url("https://ts.hzsp.com/UploadFiles/Images/Products/200329722452.jpg");
  background-size: cover;
  z-index: 50;
}

.schedule-module3-h4 {
  position: absolute;
  line-height: 26px;
  color: #5f6161;
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0;
  top: 8px;
  left: 12px;
}
.chengrenpiao {
  left: -4px;
}

.schedule-module3-strong {
  position: absolute;
  top: 70px;
  left: 115px;
  color: #e1730b;
  font-size: 24px;
}

.schedule-module3-i {
  position: absolute;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  top: 45px;
  right: -14px;
  background: #8d8523;
}

.schedule-module3-tobuy {
  margin-left: 10%;
  margin-top: 15px;
  width: 80%;
  height: 50px;
  text-align: center;
  line-height: 50px;
  background-color: #d27600;
  color: #fff;
  background-color: #d27600;
  border-radius: 10px;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
}

// 标题图2 title2
.title2 {
  position: absolute;
  top: 810px;
  left: 50%;
  margin-left: -277px;
  width: 554px;
  height: 77px;
  background-image: url("https://www.hzsp.com/images/title2s.png");
  z-index: 10;
}

// 轮播图样式
.banner2 {
  position: absolute;
  left: 50%;
  margin-left: -736px;
  top: 920px;
  width: 100%;
  height: 100%;
}

.banner2-carousel {
  width: 1472px;
  height: 376px;
}

.banner2-carousel-item {
  width: 1472px;
  height: 376px;
}

.banner2-carousel-item img {
  width: 1472px;
  height: 376px;
}

////////////////////模块4：标题图3 title3 + 九宫格模块nine-module////////////////////////////////////////
.module4 {
  position: relative;
  width: 1900px;
  height: 1050px;
  background-image: url("https://www.hzsp.com/images/repeat/lu.jpg");
}

.title3 {
  position: absolute;
  width: 256px;
  height: 69px;
  top: 80px;
  left: 200px;
  background-image: url("https://www.hzsp.com/images/title3s.png");
}

.module4-background {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 251px;
  height: 194px;
  background-image: url("https://www.hzsp.com/images/jiao4.png");
}

// 九宫格模块nine-module
.module4-nine-module {
  position: relative;
  width: 1505px;
  height: 635px;
  top: 160px;
  left: 200px;
}

.module4-nine-module-l {
  display: inline-block;
  width: 1125px;
  height: 650px;
}

.module4-nine-module-l-1.module4-nine-module-l-2 {
  width: 1125px;
  height: 326px;
  overflow: hidden;
}

.module4-nine-module-l-da {
  float: left;
  margin: 20px 15px 0;
  width: 720px;
  height: 306px;
  border-radius: 15px;
}

.module4-nine-module-l-xiao {
  float: left;
  margin: 20px 15px 0;
  width: 345px;
  height: 306px;
  border-radius: 15px;
}

.module4-image1 {
  background-size: 100% auto;
  background-position: center;
  background-image: url("https://adm.hzsp.com/uploads/20191114/81357167fb68124d2993bc37fba71f62.jpg");
}

.module4-image2 {
  background-size: auto 100%;
  background-position: center;
  background-image: url("https://adm.hzsp.com/uploads/20191115/0c12d96002fa860b34e13ddb5a457732.jpg");
}

.module4-image3 {
  background-size: auto 100%;
  background-position: center;
  background-image: url("https://adm.hzsp.com/uploads/20220408/41ad246cb272968f2f73e7d07b82641d.jpg");
}

.module4-image4 {
  background-size: auto 100%;
  background-position: center;
  background-image: url("https://adm.hzsp.com/uploads/20211130/7ff88ce444ce44645849ef32f5af26df.jpg");
}

.module4-image5 {
  background-size: auto 100%;
  background-position: center;

  background-image: url("https://adm.hzsp.com/uploads/20191114/138fccf81a2595d3c145eb1538ca355c.jpg");
}

.module4-nine-module-r {
  display: inline-block;
  position: absolute;
  width: 345px;
  height: 630px;
  margin: 20px 15px 0;
  border-radius: 15px;
  background-color: #7c440c;
  z-index: 10;
}

.module4-nine-module-video {
  width: 345px;
  height: 630px;
  object-fit: cover;
  z-index: 11;
  width: 100%;
  background: #7c440c;
  height: 100%;
  display: block;
  border-radius: 10px;
  float: right;
  position: relative;
}

.module4-button {
  position: absolute;
  bottom: 80px;
  width: 172px;
  height: 40px;
  left: 70px;
  text-align: center;
  border-radius: 10px;
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  background-color: #d27600;
  line-height: 40px;
  z-index: 12;
}

///////////////////// /模块5：标题图4 title4 + 轮播图banner3/////////////////////////////////////////////////////////

.module5 {
  position: relative;
  width: 1900px;
  height: 1000px;
  background-image: url("https://www.hzsp.com/images/caoyuan.jpg");
}

// 轮播图样式
.banner3 {
  position: absolute;
  left: 50%;
  margin-left: -750px;
  top: 200px;
  width: 100%;
  height: 100%;
}

.banner3-carousel {
  width: 1500px;
  height: 500px;
}

.banner3-carousel-item {
  width: 1500px;
  height: 500px;
}

.banner3-carousel-item img {
  width: 1500px;
  height: 500px;
}

// 标题图4 title4
.title4 {
  position: absolute;
  top: 80px;
  left: 50%;
  margin-left: -750px;
  width: 398px;
  height: 65px;
  background-image: url("https://www.hzsp.com/images/title4s.png");
  z-index: 10;
}

///////////////////// 模块6：标题图1 title5 + 轮播图banner4   /////////////////

.module6 {
  position: relative;
  width: 1900px;
  height: 1500px;
  background-image: url("https://www.hzsp.com/images/repeat/wen1.jpg");
}

// 三个背景图
.module6-background1 {
  position: absolute;
  top: -200px;
  left: 0;
  width: 577px;
  height: 438px;
  background-image: url("https://www.hzsp.com/images/jiao5.png");
  z-index: 5;
}

.module6-background2 {
  position: absolute;
  right: 0;
  top: 400px;
  width: 226px;
  height: 466px;
  background-image: url("https://www.hzsp.com/images/jiao6.png");
  z-index: 5;
}

.module6-background3 {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 1903px;
  height: 603px;
  background-image: url("https://www.hzsp.com/images/shizi.png");
  z-index: 5;
}

// 五个导航图
.module6-navbar {
  position: relative;
  top: 80px;
  left: 50%;
  margin-left: -750px;
  width: 1500px;
  height: 276px;
  z-index: 10;
}

.module6-image1 {
  position: absolute;
  width: 300px;
  height: 276px;
}

.module6-image2 {
  position: absolute;
  width: 300px;
  height: 276px;
  left: 300px;
}

.module6-image3 {
  position: absolute;
  width: 300px;
  height: 276px;
  left: 600px;
}

.module6-image4 {
  position: absolute;
  width: 300px;
  height: 276px;
  left: 900px;
}

.module6-image5 {
  position: absolute;
  width: 300px;
  height: 276px;
  left: 1200px;
}

.image1 {
  position: absolute;
  top: 0;
  left: 37.5px;
  border-radius: 50%;
  width: 225px;
  height: 225px;
  background-size: 100% 100%;
  background-image: url("https://www.hzsp.com/images/ilink1.jpg");
}

.image2 {
  position: absolute;
  top: 0;
  left: 37.5px;
  border-radius: 50%;
  width: 225px;
  height: 225px;
  background-size: 100% 100%;
  background-image: url("https://www.hzsp.com/images/ilink5.jpg");
}

.image3 {
  position: absolute;
  top: 0;
  left: 37.5px;
  border-radius: 50%;
  width: 225px;
  height: 225px;
  background-size: 100% 100%;
  background-image: url("https://www.hzsp.com/images/ilink2.jpg");
}

.image4 {
  position: absolute;
  top: 0;
  left: 37.5px;
  border-radius: 50%;
  width: 225px;
  height: 225px;
  background-size: 100% 100%;
  background-image: url("https://www.hzsp.com/images/ilink3.jpg");
}

.image5 {
  position: absolute;
  top: 0;
  left: 37.5px;
  border-radius: 50%;
  width: 225px;
  height: 225px;
  background-size: 100% 100%;
  background-image: url("https://www.hzsp.com/images/ilink4.jpg");
}

h4 {
  width: 300px;
  position: absolute;
  text-align: center;
  color: #505050;
  font-size: 24px;
  margin: 10px auto;
  bottom: 0;
}

// 标题图5 title5
.title5 {
  position: absolute;
  top: 420px;
  left: 50%;
  margin-left: -750px;
  width: 272px;
  height: 77px;
  background-image: url("https://www.hzsp.com/images/title5s.png");
  z-index: 10;
}

// 轮播图样式
.banner4 {
  position: absolute;
  left: 50%;
  margin-left: -736px;
  top: 520px;
  width: 1686px;
  height: 278px;
  z-index: 10;
}

.banner4-carousel {
  width: 1471px;
  height: 300px;
}

.banner4-carousel-item {
  width: 1686px;
  height: 278px;
}

.banner4-carousel-item img {
  width: 1471px;
  height: 278px;
}

// 标题图6 title6
.title6 {
  position: absolute;
  top: 880px;
  left: 50%;
  margin-left: -750px;
  width: 265px;
  height: 77px;
  background-image: url("https://www.hzsp.com/images/title6s.png");
  z-index: 10;
}

//问题框 module6-asks
.module6-asks {
  position: absolute;
  top: 980px;
  left: 50%;
  margin-left: -740px;
  width: 470px;
  height: 310px;
  background-color: #fff;
  border-radius: 10px;
}

.module6-asks-ul {
  padding: 20px 20px 10px;

  li {
    width: 430px;
    height: 40px;

    a {
      text-decoration: none;

      i {
        line-height: 28px;
        width: 28px;
        height: 28px;
        text-align: center;
        float: left;
        background: #c56103;
        color: #fff;
        border-radius: 5px;
        font-style: normal;
      }

      p {
        color: #000;
        float: left;
        line-height: 30px;
        margin-left: 6px;
        font-size: 13px;
      }
    }
  }
}

.module6-asks-button {
  position: absolute;
  bottom: 20px;
  width: 200px;
  height: 60px;
  left: 115px;
  text-align: center;
  border-radius: 10px;
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  background-color: #d27600;
  line-height: 60px;
}
</style>
